<template>
  <div class="mod-demo-echarts">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div id="J_chartBarBox" class="chart-box"></div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card>
          <div id="J_chartPieBox" class="chart-box" style="text-align: center;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      chartBar: null,
      chartBarOptions: [],
      chartPie: null,
      chartPieOptions: []
    }
  },
  mounted() {
    this.initChartBar()
    this.initChartPie()
  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartBar) {
      this.chartBar.resize()
    }
    if (this.chartPie) {
      this.chartPie.resize()
    }
  },
  created() {
    this.queryPoliceCasedPieEcharts()
    this.queryPoliceCasedBarEcharts()
  },
  methods: {
    // 查询最近2年的已结案分布图
    queryPoliceCasedPieEcharts() {
      this.$http.get('/police/policecase/queryPoliceCasedPieEcharts').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.chartPieOptions = res.data
        this.initChartPie()
      }).catch(() => { })
    },
    // 查询最近1年的已结案分布图
    queryPoliceCasedBarEcharts() {
      this.$http.get('/police/policecase/queryPoliceCasedBarEcharts').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.chartBarOptions = res.data
        this.initChartBar()
      }).catch(() => { })
    },
    // 柱状图
    initChartBar() {
      var option = {
        title: {
          text: '今年12个月已立案的案件数量',
          subtext: '柱状图数据',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: this.chartBarOptions.map(item => item.name)
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            data: this.chartBarOptions.map(item => item.value),
            type: 'bar'
          }
        ]
      }
      this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
      this.chartBar.setOption(option)
      window.addEventListener('resize', () => {
        this.chartBar.resize()
      })
    },
    // 饼状图
    initChartPie() {
      var option = {
        title: {
          text: '近两年已立案分布图',
          subtext: '饼图数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },

        series: [
          {
            name: '案件类型',
            type: 'pie',
            radius: '50%',
            data: this.chartPieOptions,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
      this.chartPie.setOption(option)
      window.addEventListener('resize', () => {
        this.chartPie.resize()
      })
    }
  }
}
</script>

<style lang="scss">
.mod-demo-echarts {
  >.el-alert {
    margin-bottom: 10px;
  }

  >.el-row {
    margin-top: -10px;
    margin-bottom: -10px;

    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }

  .chart-box {
    min-height: 400px;
  }
}
</style>
